<template>
  <div class="globalzj grayback">
    <van-nav-bar title="选择科室" left-arrow @click-left="onClickLeft" />
    <div class="jtlist">
      <div class="type">
        <div
          class="typelist"
          :class="ac == index ? 'ac' : ''"
          v-for="(item, index) in list"
          @click="check(index,item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="ks">
        <div class="kslist" v-for="(item, index) in list1" @click="xzks(item)">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import service from "../request";
export default {
  data() {
    return {
      ac: 0,
      list: [],
      list1: [],
      id:""
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    xzks(item) {
      this.$router.push({
        path: "/twwz",
        
      });
            this.id=item.id
      window.localStorage.setItem("jsid",this.id)
    },
    check(u,item) {
      this.ac = u;

      this.list1 = this.list[u].child;
    },
    async getdata() {
      const res = await service.get("/dep/all");
      console.log(res);
      this.list = res.data;
      this.list1 = this.list[this.ac].child;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.kslist {
  width: 100%;
  height: 40px;
  text-align: left;
  padding-left: 15px;
  line-height: 40px;
  font-size: 14px;
  color: #848484;
  box-sizing: border-box;
}
.ac {
  background: #ffff !important;
}
.typelist {
  width: 100%;
  height: 40px;
  background: #ebedf0;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  color: #848484;
}
.ks {
  width: calc(100% - 90px);
  height: 100%;
  overflow: auto;
  float: right;
}
.type {
  width: 90px;
  height: 100%;
  overflow: auto;

  float: left;
}
.jtlist {
  width: 100%;
  height: calc(100% - 46px);
  overflow: hidden;
}
</style>